<template>
  <a-modal
      v-model:open="visible"
      centered
      destroyOnClose
      @cancel="cancel"
      :footer="null"
      :width="innerWidth>750?'350px':'100%'"
      style="max-width: 100vw"
  >
    <div class="login">
      <div class="title"> {{ pageType==='login'?'登 录':'注 册' }} </div>
      <a-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          labelAlign="right"
      >
        <a-form-item name="mobile">
          <a-input v-model:value="formData.mobile" autocomplete="off" placeholder="请输入账号">
            <template #prefix> <UserOutlined /> </template>
          </a-input>
        </a-form-item>
        <a-form-item name="loginpass">
          <a-input v-model:value="formData.loginpass" type="password" autocomplete="off" placeholder="请输入密码">
            <template #prefix> <LockOutlined /> </template>
          </a-input>
        </a-form-item>
      </a-form>
      <div class="forgot-register">
        <div class="forgot" @click="pageType = 'login'" v-if="pageType==='register'"> 已有账号，去登录. </div>
        <div class="register" @click="pageType = 'register'" v-else> 没有账号？去注册. </div>
      </div>
      <a-button type="primary" style="background: var(--primary)" @click="confirm"> 登录 </a-button>
      <div class="agreement" :class="isTy?'is-red':''" @click="readAgree"> 我已阅读并同意《***隐私协议》 和 《***退货协议》</div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { validateMobile, validatePWD, validateNull } from '@/utils/validate.js'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/stores'
import { loginApi, registerOrLoginApi } from '@/api'
const visible = computed(() => useUserStore().isLogin)
const innerWidth = ref(window.innerWidth)
const formRef = ref();
const pageType = ref('login');
const isTy = ref(false)
const formData = ref({
  mobile: '15511111115',
  loginpass: '111111',
});
const rules = {
  mobile: [{ validator: validateMobile, trigger: 'blur' }],
  loginpass: [{ validator: validateNull, trigger: 'blur' }],
};
// 已读协议
const readAgree = () => {
  isTy.value = !isTy.value;
}
// 提交表单
const confirm = () => {
  const { loginToggle, setMember } = useUserStore();
  if (!isTy.value) return message.error('请阅读并同意协议')
  formRef.value.validate().then(() => {
    let path = 'login'
    if (pageType.value === 'register') path = 'register'
    const params = { ...formData.value }
    registerOrLoginApi(params, path).then(res => {
      message.success(pageType.value === 'register' ?'注册成功':'登录成功')
      if (pageType.value === 'login') {
        loginToggle(false)
        setMember(res)
        window.location.reload()
      }
    })
  })
}
const cancel = () => {
  const { loginToggle } = useUserStore()
  loginToggle(false)
}
// 获取页面宽度
const getInnerWidth = () => {
  innerWidth.value = window.innerWidth
}
onMounted(() => {
  window.addEventListener('resize', getInnerWidth)
})
onUnmounted(() => {
  window.removeEventListener('resize', getInnerWidth)
})
</script>
<style lang="scss" scoped>
:deep(.ant-modal) {
  height: 100vh !important;
}
.login {
  display: flex;
  align-items: center;
  flex-direction: column;
  .title {
    margin: 10px 0 20px;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
  }
  :deep(.ant-form) {
    width: 100%;
    .ant-input-affix-wrapper {
      height: 44px;
    }
  }
  .forgot-register {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    color: #999;
    cursor: pointer;
    font-size: 12px;
    margin-bottom: 10px;
    .forgot:hover, .register:hover {
      color: var(--primary);
    }
  }
  .ant-btn {
    height: 40px;
    width: 100%;
  }
  .agreement {
    color: #999;
    font-size: 12px;
    cursor: pointer;
    margin-top: 10px;
    line-height: 14px;
    padding-left: 20px;
    position: relative;
    &::before {
      display: block;
      content: '';
      width: 14px;
      height: 14px;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #ccc;
      border-radius: 50%;
      box-sizing: border-box;
    }
    &.is-red::after {
      display: block;
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--primary);
      position: absolute;
      left: 3px;
      top: 3px;
    }
  }
}
@media (max-width: 750px) {
  .login {
    height: calc(100vh - 40px) !important;
  }
}
</style>